<template>
	<block v-if="allLoadCode == 3">
		<view class="f-row" style="display: flex;flex-direction: row;height: 80rpx;justify-content: center;align-items: center;">
			<view class="dot-1"></view>
			<view class="dot-2"></view>
			<view class="dot-3"></view>
		</view>
	</block>
	<block v-else-if="allLoadCode == 2">
		<view class="f-column" style="justify-content: center;align-items: center;height: 100rpx;">
			<view :style="'height: 80rpx;line-height: 80rpx;font-size: 26rpx;color:' + fontColor ">没有更多内容了 ~</view>
		</view>
	</block>
	<block v-else-if="allLoadCode == 4"></block>
	<block v-else-if="allLoadCode == 0">
		<view class="load-page-css">
			<view class="title-css">{{titleStr}}</view>
			<view class="des-css">{{desStr}}</view>
			<image mode="aspectFill" src="../static/images/loading.gif" style="width: 150rpx;height: 150rpx;border-radius: 30rpx;margin-top: 15rpx;">
			</image>
		</view>
	</block>
	<block v-else-if="allLoadCode == -1">
		<view class="load-page-css" @click="reload">
			<view class="title-css">{{titleStr}}</view>
			<view class="des-css">{{desStr}}</view>
			<image mode="aspectFill" :src="iconPath" style="width: 150rpx;height: 150rpx;margin-top: 15rpx;"></image>
		</view>
	</block>
	<block v-else>
		<view class="load-page-css">
			<view class="title-css">{{titleStr}}</view>
			<view class="des-css">{{desStr}}</view>
			<image mode="aspectFill" :src="iconPath" style="width: 150rpx;height: 150rpx;margin-top: 15rpx;"></image>
		</view>
	</block>
</template>

<script>
	export default {
		props: {
			statusObject: {
				type: Object,
				default: function() {
					return {
						status: 0
					}
					// -1 加载失败	0 加载中		1 加载完毕无内容		2 加载完没有更多内容		3 加载完还有内容未加载	4 加载完毕(首页类页面)
				}
			},
			backGroundColor: {
				type: String,
				default: 'background-color:#FFFFFF'
			},
			fontColor: {
				type: String,
				default: '#999999'
			}
		},
		data() {
			return {
				allLoadCode: this.statusObject.status
			}
		},
		watch: {
			statusObject: function(newV, oldV) {
				this.allLoadCode = newV.status;
			}
		},
		computed: {
			iconPath: function() {
				return this.statusObject.iconPath ? this.statusObject.iconPath : '../../static/icons/logo300x300.png'
			},
			titleStr: function() {
				return this.statusObject.titleStr ? this.statusObject.titleStr : 
													this.allLoadCode == 0 ? '加载中' : 
													this.allLoadCode == -1 ? '加载失败，点击重试' : 
													this.allLoadCode == 1 ? '没有内容' : '标题' ;
			},
			desStr: function() {
				return this.statusObject.desStr ? this.statusObject.desStr : 
													this.allLoadCode == 0 ? '请耐心等待' : 
													this.allLoadCode == -1 ? '网络异常，请检测设置' : 
													this.allLoadCode == 1 ? '快去推广吧' : '描述' ;
			}
		},
		methods: {
			reload(e) {
				this.$emit('reload' , e);
			}
		}
	}
</script>

<style scoped>
	.loading-more {
		width: 100%;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	@keyframes loading {
		0% {
			background-color: #d8d8d8;
			transform: scale(1);
		}

		25% {
			transform: scale(1.25);
		}

		50% {
			background-color: #84bdf3;
			transform: scale(1.5);
		}

		75% {
			transform: scale(1.25);
		}

		100% {
			background-color: #d8d8d8;
			transform: scale(1);
		}
	}

	.dot-1,
	.dot-2,
	.dot-3 {
		height: 10rpx;
		width: 10rpx;
		border-radius: 50%;
		background-color: #d8d8d8;
		margin: 6rpx;
	}

	.dot-1 {
		animation: loading 1.5s linear 0s infinite;
	}

	.dot-2 {
		animation: loading 1.5s linear .5s infinite;
	}

	.dot-3 {
		animation: loading 1.5s linear 1s infinite;
	}

	.load-page-css {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;
	}
	
	.title-css {
		line-height: 70rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.des-css {
		line-height: 40rpx;
		font-size: 24rpx;
		color: #999999;
	}
</style>
